<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()">返回</span>
        </div>
        <div class="div">
          <span>选择团队长</span>
        </div>
        <div class="div">
        </div>
      </header>
      <van-search
        v-model="searchValue"
        shape="round"
        background="#fff"
        @clear="onSearch"
        placeholder="请输入医生姓名"
      />
      <van-dropdown-menu active-color="#1DA4F4" >
        <van-dropdown-item ref="item" :title="CityTitle" @change="onchange(0)" >
          <van-tree-select
            @click-nav="clickNav()"
            :items="items"
            :main-active-index.sync="activeIndex"
          >
            <template slot="content" >
              <ul class="right-content">
                <li v-for="(item,index) in policeList" :key="index"
                    @click="onItemClick(item.text)"> {{item.text}}
                  <van-icon v-show="CityTitle == item.text" name="success" color="#1da4f2" />
                </li>
              </ul>
              <!--       :class="{active:text==item.text}"       -->
            </template>
          </van-tree-select>
        </van-dropdown-item>
        <van-dropdown-item :title="staffTypeTitle" v-model="staffType" @change="onchange(4)" :options="option5" />
        <van-dropdown-item :title="keshiTitle" v-model="DEPART" @change="onchange(1)" :options="option2" />
        <van-dropdown-item :title="gradeTitle" v-model="grade_id" @change="onchange(2)" :options="option3" />
        <van-dropdown-item :title="doctorTitle" v-model="MAJOR" @change="onchange(3)" :options="option4" />
      </van-dropdown-menu>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="doctorList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../assets/空两本书.png')"
      description="暂无符合条件医生"
    />
    <div class="box"
         :class="[selectID === item.USER_ID ? 'select' : '']"
         @click="clickBox(item)"
         v-for="(item, index) in doctorList" :key="index">
      <div class="box_left">
        <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
        <img v-else-if="item.SEX == 1" src="../../assets/男医生@2x.png" class="PHOTO" alt="">
        <img v-else-if="item.SEX == 2" src="../../assets/女医生@2x.png" class="PHOTO" alt="">
      </div>
      <div class="box_right">
        <ul>
          <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
            </span>
            <button class="btnXiangQing" @click.stop="doctorInfo(item)">医生详情
              <img src="../../assets/更多白.png" alt="">
            </button>
          </li>
          <li>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
            <span>|</span>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
          </li>
          <li>
            <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
            <button class="biaoqian">{{item.GRADE}}</button>
          </li>
        </ul>
<!--        <div class="box_rigth_bottom">-->
<!--          <p>-->
<!--            <a >接诊率:</a><span>{{item.jiezhenCount}}</span>-->
<!--            <a >好评率:</a><span>{{item.haopingLv}}</span>-->
<!--            <a >咨询量:</a><span>{{item.zixunCount}}</span>-->
<!--          </p>-->
<!--          <p class="goodAt">-->
<!--            <a style="display: block">擅长:</a>-->
<!--            <span>{{item.Goodat}}</span>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a >最快回复:</a>-->
<!--            <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>-->
<!--            <span v-else style="color: #999999">暂无</span>-->
<!--            <a >平均回复:</a>-->
<!--            <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>-->
<!--            <span style="color: #999999" v-else>暂无</span>-->
<!--          </p>-->
<!--        </div>-->
      </div>
    </div>
    <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import area from '../../components/China/area'
import {Toast} from 'vant'
import $ from 'jquery'
import city from '../../components/China/TreeSelectCity'
export default {
  name: 'SelectTeamLeader',
  data () {
    return {
      PROVINCE: '',
      city: '',
      MAJOR: '', // 医生职称
      grade_id: '',
      DEPART: '', // 科室
      staffType: '', // 医生类型
      CityTitle: '全国',
      keshiTitle: '科室选择',
      gradeTitle: '医院等级',
      doctorTitle: '职称',
      staffTypeTitle: '医生类型',
      option1: [],
      option2: [],
      option3: [
        {text: '不限', value: ''},
        {
          text: '一甲',
          value: '一甲'
        }, {
          text: '一乙',
          value: '一乙'
        }, {
          text: '二甲',
          value: '二甲'
        }, {
          text: '二乙',
          value: '二乙'
        }, {
          text: '三甲',
          value: '三甲'
        }, {
          text: '三乙',
          value: '三乙'
        }, {
          text: '社区',
          value: '社区'
        }
      ],
      option4: [
        {text: '不限', value: ''},
        {text: '主任医师', value: '主任医师'},
        {text: '副主任医师', value: '副主任医师'},
        {text: '主治医师', value: '主治医师'},
        {text: '主管护理师', value: '主管护理师'}
      ],
      option5: [],
      areaList: area,
      doctorList: [],
      selectID: '',
      type: Number(this.$route.query.type),
      items: city.children,
      activeIndex: 0,
      policeList: [],
      isLoading: true,
      searchValue: null
    }
  },
  computed: {
    typeLabel: function () {
      return '咨询'
    }
  },
  watch: {
    searchValue (val, newval) {
      console.log(this.searchValue)
      // 筛选后 医生
      this.getDoctor()
    }
  },
  mounted () {
    // 科室
    this.getKeShi()
    // 医院等级
    // this.getHospotal()
    // 医生职称
    // this.getZhiCheng()
    this.clickNav()
    // 获取医生类型
    this.getDoctor_staffType()
    // 筛选后 医生
    this.getDoctor()
  },
  methods: {
    onSearch () {
      // 筛选后 医生
      this.getDoctor()
    },
    // 获取医生类型
    getDoctor_staffType () {
      this.$http.listByType({dict_type: 'staff_type'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option5 = [
              {text: '不限', value: ''}
            ]
            for (let i in res.data.data) {
              let obj = {
                text: res.data.data[i].dict_name, value: res.data.data[i].dict_value
              }
              this.option5.push(obj)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    onItemClick (city) {
      this.city = city
      this.CityTitle = city
      this.$refs.item.toggle()
      this.getDoctor()
    },
    clickNav () {
      this.policeList = this.items[this.activeIndex].children
      this.PROVINCE = this.items[this.activeIndex].text
    },
    // 返回
    back () {
      this.$router.history.go(-1)
      // sessionStorage.removeItem('TeamData')
    },
    // 点击医生跳转
    clickBox (item) {
      let data = JSON.parse(sessionStorage.getItem('TeamData'))
      this.selectID = item.USER_ID
      data.manager_doc_user_id = item.USER_ID
      data.manager_doc_name = item.NICK_NAME
      sessionStorage.setItem('TeamData', JSON.stringify(data))
      this.$router.history.go(-1)
    },
    // 查看医生详细资料
    doctorInfo (data) {
      // sessionStorage.setItem('doctorInfo', JSON.stringify(data))
      this.$router.push({path: '/doctorInfo', query: {doc_user_id: data.USER_ID}})
    },
    // 获取符合筛选医生信息
    getDoctor () {
      this.doctorList = []
      this.isLoading = true
      if (this.PROVINCE === '全国') {
        this.PROVINCE = ''
      }
      if (this.city === '全国') {
        this.city = ''
      }
      this.$http.findDoctor({PROVINCE: this.PROVINCE,
        city: this.city,
        MAJOR: this.MAJOR,
        grade_name: this.grade_id,
        DEPART: this.DEPART,
        type: this.staffType,
        name: this.searchValue
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 筛选框发生更改时触发
    onchange (index) {
      var _this = this
      // DEPART 科室选择  keshiTitle

      var Data
      // eslint-disable-next-line eqeqeq
      if (index == 1) {
        Data = this.option2.filter(function (item) {
          return item.value === _this.DEPART
        })
        if (Data[0].text === '不限') {
          this.keshiTitle = '科室选择'
        } else {
          this.keshiTitle = Data.text
        }
        // eslint-disable-next-line eqeqeq
      } else if (index == 2) {
        // grade_id 医院等级  gradeTitle
        Data = this.option3.filter(function (item) {
          return item.value === _this.grade_id
        })
        if (Data[0].text === '不限') {
          this.gradeTitle = '医院等级'
        } else {
          this.gradeTitle = Data.text
        }
        // eslint-disable-next-line eqeqeq
      } else if (index == 3) {
        // MAJOR 医生职称  doctorTitle
        Data = this.option4.filter(function (item) {
          return item.value === _this.MAJOR
        })
        if (Data[0].text === '不限') {
          this.doctorTitle = '职称'
        } else {
          this.doctorTitle = Data.text
        }
      } else if (index == 4) {
        // MAJOR 医生职称  doctorTitle
        Data = this.option5.filter(function (item) {
          return item.value === _this.staffType
        })
        if (Data[0].text === '不限') {
          this.staffTypeTitle = '医生类型'
        } else {
          this.staffTypeTitle = Data.text
        }
      }
      this.getDoctor()
    },
    // 点击步骤条
    changeMenu (index) {
      // this.menuIndex = index
      // if (index === 0) {
      //   this.$router.push({path: '/first'})
      // }
      // if (index === 1) {
      //   this.$router.push({path: '/second'})
      // }
      // if (index === 2) {
      //   this.$router.push({path: '/third'})
      // }
    },
    // 城市确认按钮
    Cityconfirm (val) {
      if (val[0].name !== '' && val[0].name !== undefined && val[1].name !== '' && val[1].name !== undefined) {
        this.PROVINCE = val[0].name
        this.city = val[1].name
        this.CityTitle = val[1].name
        this.$refs.item.toggle()
      } else {
        // Toast('省市名称格式不正确')
        this.PROVINCE = ''
        this.city = ''
        this.CityTitle = '全国'
        this.$refs.item.toggle()
      }
      this.getDoctor()
    },
    // 城市取消按钮
    CityCancel () {
      this.$refs.item.toggle()
    },
    // 获取科室
    getKeShi () {
      // checkInspection/findKeShiZiDian
      this.$http.findKeShiZiDian({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option2 = [
              {text: '不限', value: ''}
            ]
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              var obj = { text: current.name, value: current.name }
              _this.option2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // // 获取医院等级
    // getHospotal () {
    //   this.$http.findHosptialGrade({})
    //     .then(res => {
    //       console.log(res)
    //       if (res.data.status === 'success') {
    //         this.option3 = [{text: '不限', value: ''}]
    //         var _this = this
    //         res.data.data.forEach(function (current, index, arr) {
    //           var obj = { text: current.GRADE, value: current.GRADE_ID }
    //           _this.option3.push(obj)
    //         })
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // 获取职称
    getZhiCheng () {
      this.$http.findDoctorMAJOR({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option4 = [
              {text: '不限', value: ''}
              // {text: '主任医师', value: '主任医师'},
              // {text: '副主任医师', value: '副主任医师'},
              // {text: '主治医师', value: '主治医师'},
              // {text: '主管护理师', value: '主管护理师'}
            ]
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              var obj = { text: current.MAJOR, value: current.MAJOR }
              _this.option4.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  destroyed () {
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.top{
  position: sticky;
  top: 0;
  background: white;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  border-bottom: 1px solid #E5E5E5;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  width: 7px;
  height: 13px;
  margin: 0 5px 0 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.solid{
  color: #1DA4F2;
}
/deep/ .van-dropdown-menu__bar{
  background-color: rgba(29, 164, 242, 0.1);
  box-shadow: none;
  display: flex;
  justify-content: space-around;
  width: 100%;
  overflow-x: auto;
}
/deep/ .van-dropdown-menu__title{
  padding: 0 8px 0 0;
}

/deep/ .van-dropdown-menu__title::after{
  border-color: transparent transparent #333 #333;
}
/deep/ .van-dropdown-item__content{
  max-height: 60%;
}
/deep/ .van-dropdown-menu__item{
  /*flex: none;*/
  min-width: 80px;
}
.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
}
/*/deep/ .right-content{*/
/*  overflow: auto;*/
/*}*/
/deep/ .right-content li{
  height: 47px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
}
/deep/ .van-sidebar-item--select::before{
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 16px;
  background-color: #1DA4F2;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  content: '';
}
.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.box{
  padding: 10px;
  box-sizing: border-box;
  background: white;
  margin-bottom: 8px;
  display: flex;
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.dict_name{
  font-size: 11px;
  border: 1px solid #1DA4F2;
  border-radius: 2px;
  background: rgba(16, 184, 246, 0.1);
  color: #1da4f2;
  padding: 1px 3px;
  box-sizing: border-box;
  white-space: nowrap;
  /*margin-top: 10px;*/
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  height: 25px;
  display: flex;
  align-items: center;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
.btnXiangQing{
  color: white;
  background: #1DA4F2;
  border: none;
  padding: 3px 8px;
  border-radius: 15px;
  box-sizing: border-box;
  font-size: 11px;
}
.btnXiangQing img{
  width: 5px;
  height: 9px;
  margin-left: 5px;
}

.btnXiangQing,
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.box_rigth_bottom{
  margin-top: 5px;
}
.box_rigth_bottom p{
  margin-bottom: 5px;
}
.box_rigth_bottom p:nth-child(1),
.box_rigth_bottom p:nth-child(3){
  font-size: 13px;
}
.box_rigth_bottom p a{
}
.box_rigth_bottom p span{
  color: #E3170D;
  margin: 0 8px 0 3px;
}
.goodAt{
  font-size: 13px;
  display: flex;
}
.goodAt a{
  display: block;
  white-space: nowrap;
}
.goodAt span{
  /*width: 80%;*/
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333 !important;
}
.select{
  background: rgba(29, 164, 242, 0.2);
}
.wenZhenIng{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2EC49B;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.wenZhenIng a{
  display: flex;
  width: 8px;
  height: 8px;
  background: #2EC49B;
  border-radius: 50%;
  margin-right: 5px;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/
</style>
